<html>
<head>
<title>Countries and their Capitals</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="ui-grid.js"></script>
<script type="text/javascript" src="themeswitcher.js"></script>
<link rel="stylesheet" type="text/css" href="css/robin/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="grid.css">
</head>
<body>
<div id="switcher"></div>
<table id="grid">
<thead>
	<tr>
		<th width="30%">Country</th>
		<th width="70%">Capital</th>
	</tr>
</thead>
<tr><td>Argentina</TD><td>Buenos Aires</td></tr>
<tr><td>Guyana</td><td>Georgetown</td></tr>
<tr><td>Bolivia</td><td>Sucre</td></tr>
<tr><td>Paraguay</td><td>Asuncion</td></tr>
<tr><td>Brazil</td><td>Brasilia</td></tr>
<tr><td>Peru</td><td>Lima</td></tr>
<tr><td>Chile</td><td>Santiago</td></tr>
<tr><td>Surinam</td><td>Paramaribo</td></tr>
<tr><td>Colombia</td><td>Bogota</td></tr>
<tr><td>Uruguay</td><td>Montevideo</td></tr>
<tr><td>Ecuador</td><td>Quito</td></tr>
<tr><td>Venezuela</td><td>Caracas</td></tr>
<tr><td>French Guiana</td><td>Cayenne</td></tr>
</table>
</body>
</html>
<script>
$(document).ready(function(){
$('#switcher').themeswitcher();
$('#grid').grid({
				'title':'Countries and their capitals',
				'titleIcon':'money',
				'rownumbers': true,
				'showFooter': true,
				'width':500,
				'paging':true,
				'rowsPerPage':5
				});
	  });
</script>